<template>
    <div>
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
        <div>B2</div>
    
    
    
        <!-- <my-custom-element></my-custom-element> -->
    
    
    
        <!-- <input type="text" @keyup.media-play-pause="method"> -->
    
    
    
        <!-- <input type="text" :value="redBg | capitalize">
    
        
    
            
    
        
    
                    <input type="text" :value="redBg"> -->
    
    
    
        <!-- <my-test-com></my-test-com> -->
    
        <myblog-post2 @a="fn" @b="fn1"></myblog-post2>
        <!-- <div>{{msg}}</div>
    
        <div>
    
    
            <p>[[msg]]</p>
            <p>${msg}</p>
    
        </div> -->
    
    
    
    <button @click="fn3">updata</button>
    <button @click="fn4">destroy</button>
    <button @click='flag = !flag'>切换</button>
       <transition name='fade'>
         <div v-if='flag' class="box"></div>
       </transition>
    
    <div>66666</div>
    <div>{{msg27}}</div>
    <div>66666</div>
   ====》》》》》{{ msg  | capT1 |  capT3 }}《《《《《======
    
   
    <div v-if="11==11" key="status">
        {{ msg }}
    </div>
    
    </div>
</template>

<script setup>

</script>
<script>

import { ref } from 'vue';
const msg27 = ref('test')
export default {
    comments: true,
    filters:{
        capT1(value){
            return value.toString().charAt(0).toUpperCase()+value.toString().slice(1)
        },
        capT3(value){
            return value.toString().charAt(0).toLowerCase()+value.toString().slice(1)
        },
        capT2(value){
            return value.toString().charAt(0)+value.toString().charAt(1).toUpperCase()+value.toString().slice(2)
        },
    },
    name: 'b2Compontent',
    data() {
        return {
            flag: false,
            msg: 'hello===hello+++++++hello',
            pro: '                    backgroundColor.a.b                ',
            redBg: '                green                ',
        }
    },

    created: function() {
        console.log('================',msg27.value);
    },
    beforeUpdate(){
        console.log("==>>beforeUpdate");
    },
    updated(){
        console.log("==>>updated");
    },
    beforeDestroy(){
        console.log("==>>beforeDestroy");
    },
    destroyed(){
        console.log("==>>destroyed");
    },
   
    methods: {
        onKeyUp(event) {
            console.log('====?', event)
        },
        fn(){
            
        },
        fn1(){

        },
        fn3(){
            this.$forceUpdate()
        },
        fn4(){
            this.$destroy()
        }
    }
}
</script>
<style scoped lang="scss">
//开始过度了
.fade-enter-active{
    transition: all 2.5s linear;
  }
  //过度完成
  .fade-enter-to{
     background:yellow;
     width:200px;
     height:200px;
  }
  //离开的过度
  .fade-leave-from{
    width:200px;
    height:200px;
    transform:rotate(360deg)
  }
  //离开中过度
  .fade-leave-active{
    transition: all 1s linear;
  }
  
  .fade-leave-to{
    width:0px;
     height:0px;
  }
</style>